<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <main class="max-w-4xl mx-auto px-4 py-8">
      <!-- 订阅标题 -->
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-3">文献订阅服务</h2>
        <p class="text-gray-600">定期获取最新研究文献推送</p>
      </div>

      <!-- 订阅表单 -->
      <div class="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto">
        <form class="space-y-6" @submit.prevent>
          <div>
            <label class="block text-gray-700 mb-2">邮箱地址</label>
            <input 
              type="email"
              placeholder="请输入您的邮箱"
              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400"
            >
          </div>

          <div>
            <label class="block text-gray-700 mb-2">订阅频率</label>
            <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400">
              <option value="weekly">每周推送</option>
              <option value="monthly">每月推送</option>
            </select>
          </div>

          <div>
            <label class="block text-gray-700 mb-2">感兴趣的研究领域</label>
            <textarea
              placeholder="请输入您感兴趣的研究领域或关键词..."
              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 min-h-[100px]"
            ></textarea>
          </div>

          <button 
            class="w-full bg-gray-400 text-white px-6 py-3 rounded-lg cursor-not-allowed"
            disabled
          >
            功能开发中...
          </button>
        </form>

        <div class="mt-6 p-4 bg-blue-50 rounded-lg">
          <p class="text-blue-600 text-sm text-center">
            文献订阅推送功能正在开发中，敬请期待！
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// 订阅相关逻辑将在后续开发中实现
</script>
